<template>
	<view>
		<view class="cfmbox" v-if="orderFlag == 1">
			
			
		</view>

		<view class="order-submission">
			
			<OrderGoods :evaluate="0" :cartInfo="orderGroupInfo.cartInfo"></OrderGoods>
			<view class="wrapper">
			
			
				<view v-if="shipping_type === 1">
					<view class="item acea-row row-between-wrapper">
						<view>联系人</view>
						<view class="discount"><input type="text" placeholder="请填写您的联系姓名" v-model="contacts" /></view>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>联系电话</view>
						<view class="discount"><input type="text" placeholder="请填写您的联系电话" v-model="contactsTel" /></view>
					</view>
				</view>
				<view class="item">
					<view>备注信息（150字以内）</view>
					<textarea v-model="mark"></textarea>
				</view>
			</view>
			<view class="wrapper">
				<view class="item">
					<view>支付方式</view>
					<view class="list">
						<view class="payItem acea-row row-middle" :class="active === 'weixin' ? 'on' : ''" @click="payItem('weixin')" v-show="isWeixin">
							<view class="name acea-row row-center-wrapper">
								<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
								微信支付
							</view>
							<view class="tip">微信快捷支付</view>
						</view>
						<view class="payItem acea-row row-middle" :class="active === 'weixin' ? 'on' : ''" @click="payItem('weixin')" v-show="!isWeixin">
							<view class="name acea-row row-center-wrapper">
								<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
								微信支付
							</view>
							<view class="tip">微信快捷支付</view>
						</view>
						<!-- <view class="payItem acea-row row-middle" :class="active === 'yue' ? 'on' : ''" @click="payItem('yue')">
							<view class="name acea-row row-center-wrapper">
								<view class="iconfont icon-icon-test" :class="active === 'yue' ? 'bounceIn' : ''"></view>
								优品豆支付
							</view>
							<view class="tip">可用优品豆：{{ userInfo.nowMoney || 0 }}</view>
						</view> -->
					</view>
				</view>
			</view>

			<view style="height:120rpx"></view>
			<view class="footer acea-row row-between-wrapper">
				<view>
					合计:
					<text class="font-color-red">￥{{ orderPrice.payPrice }}</text>
				</view>
				<view class="settlement" @click="createOrder">立即结算</view>
			</view>
	<!-- 		<CouponListWindow
				v-on:couponchange="changecoupon($event)"
				v-model="showCoupon"
				:price="orderPrice.totalPrice"
				:checked="usableCoupon.id"
				@checked="changeCoupon"
				:cartid="cartid"
			></CouponListWindow> -->

			<!--  <CouponListPlateWindow v-on:couponchange="couponPlateTap($event)" v-model="showPlateCoupon" :price="orderPrice.totalPrice"
	    :checked="usablePlateCoupon.id" @checked="changePlateCoupon" :cartid="cartid"></CouponListPlateWindow> -->

			<AddressWindow @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress" :checked="addressInfo.id" ref="mychild"></AddressWindow>
		</view>
	</view>
</template>
<style scoped lang="less">
.order-submission .wrapper .shipping select {
	color: #999;
	padding-right: 0.15 * 100rpx;
}

.order-submission .wrapper .shipping .iconfont {
	font-size: 0.3 * 100rpx;
	color: #515151;
}

.address.acea-row.row-between-wrapper {
	background-color: #fff;
}

.item.acea-row.row-between-wrapper {
	background-color: #fff;
}

.order-submission .wrapper .item {
	background-color: #fff;
}

.orderGoods .total {
	background-color: #fff;
}

.order-submission .allAddress {
	width: 100%;

	background-image: linear-gradient(to bottom, #fff 0%, #fff 100%);
	background-image: -webkit-linear-gradient(to bottom, #fff 0%, #fff 100%);
	background-image: -moz-linear-gradient(to bottom, #fff 0%, #fff 100%);
	padding-top: 1 * 100rpx;
}

.order-submission .allAddress .nav {
	margin: 0 auto;
	padding: 0 30rpx;
	width: 100%;
	box-sizing: border-box;
}

.order-submission .allAddress .nav .item {
	flex: 1;
	position: relative;
}

.order-submission .allAddress .nav .item.on {
	position: relative;
}

.order-submission .allAddress .nav .item.on:before {
	position: absolute;
	bottom: 0;
	content: '快递配送';
	font-size: 0.28 * 100rpx;
	display: block;
	height: 0;
	left: 0;
	right: 0;
	border-width: 0.4 * 100rpx;
	border-style: solid;
	border-color: #eee;
	// border-color: #fff;
	z-index: 9;
	text-align: center;
	line-height: 0.14 * 100rpx;
	border-radius: 10rpx 0 0 0;
}

.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
	content: '到店自提';
	border-width: 0.4 * 100rpx;
}

.order-submission .allAddress .nav .item.on2 {
	position: relative;
}

.order-submission .allAddress .nav .item.on2:before {
	position: absolute;
	bottom: 0;
	content: '到店自提';
	font-size: 0.28 * 100rpx;
	display: block;
	height: 0;
	left: 0;
	right: 0;
	border-width: 0.4 * 100rpx;
	border-style: solid;
	border-color: #d5e6e6;
	// border-color: #fff;
	text-align: center;
	line-height: 0.14 * 100rpx;
	border-radius: 0 10rpx 0 0;
}

.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
	content: '快递配送';
	border-width: 0.4 * 100rpx;
}

.order-submission .allAddress .address {
	width: 6.91 * 100rpx;
	height: 1.58 * 100rpx;
	margin: 0 auto;
	box-sizing: border-box;
	border-radius: 0 0 20rpx 20rpx;
	margin-bottom: 10rpx;
}

.order-submission .allAddress .line {
	width: 7.1 * 100rpx;
	margin: 0 auto;
}

.order-submission .wrapper .item .discount input::placeholder {
	color: #ccc;
}

.moneyList {
	background-color: #fff;
}

.cfmbox {
	margin: 30rpx;
	width: 690rpx;
	height: 250rpx;
	background: #f7a333;
	border-radius: 16rpx;
}

.cfmcon {
	width: 690rpx;
	height: 200rpx;
	background: #ffffff;
	border-radius: 16rpx;
	// border:1px solid #ffffff;
}

.cfmcon .left {
	float: left;
	margin-left: 54rpx;
	margin-top: 56rpx;
	margin-right: 54rpx;
}

.cfmcon .left image {
	width: 111rpx;
	height: 87rpx;
}

.cfmcon .right {
	float: left;
	width: 440rpx;
	margin-top: 36rpx;
}

.cfmcon .right .title {
	font-size: 26rpx;
	color: #333333;
	font-weight: bold;
	margin-bottom: 24rpx;
}

.cfmcon .right .content {
	font-size: 22rpx;
	color: #999999;
}

.cfmcon .right .content text {
	display: block;
	line-height: 36rpx;
}

.cfmtip {
	text-align: center;
	width: 100%;
	height: 50rpx;
	border-radius: 16rpx;
	// color: #ffffff;
	font-size: 24rpx;
	padding-top: 10rpx;
}
</style>
<script>
import OrderGoods from '@/components/OrderGoods';
import CouponListWindow from '@/components/CouponListWindow';
import CouponListPlateWindow from '@/components/CouponListPlateWindow';
import AddressWindow from '@/components/AddressWindow';
import { postOrderConfirm, postOrderComputed, createOrder } from '@/api/order';
import { mapGetters } from 'vuex';
import { handleOrderPayResults, subscribeMessage,payOrderHandle } from '@/libs/order';
import { weappPay } from '@/libs/wechat';
import { isWeixin, handleErrorMessage } from '@/utils';

const NAME = 'OrderSubmission',
	_isWeixin = isWeixin();
export default {
	name: NAME,
	components: {
		OrderGoods,
		CouponListWindow,
		CouponListPlateWindow,
		AddressWindow
	},
	props: {},
	data: function() {
		return {
			offlinePayStatus: 2,
			from: this.$deviceType,
			// from:"app",
			imgUrl: 'http://mall-image.hxyrfwpt.com/static/icon-gift.png',
			deduction: true,
			enableIntegral: true,
			enableIntegralNum: 0,
			isWeixin: _isWeixin,
			pinkId: 0,
			// active: _isWeixin ? "weixin" : "yue",
			active: 'weixin', //默认方式wx
			showCoupon: false,
			showPlateCoupon: false,
			showAddress: false,
			addressInfo: {},
			couponId: 0,
			plateCouponId: 0,
			orderGroupInfo: {
				priceGroup: {}
			},
			usableCoupon: {},
			usablePlateCoupon: {},
			addressLoaded: false,
			useIntegral: false,
			orderPrice: {
				payPrice: '计算中'
			},
			mark: '',
			systemStore: {},
			shipping_type: 0,
			product_shipping_type: 3, //配送方式  1=快递 ，2=门店自提 3:全部
			contacts: '',
			contactsTel: '',
			storeSelfMention: 0,
			cartid: '',
			orderFlag: '0' //默认是0
		};
	},
	computed: mapGetters(['userInfo']),
	watch: {
		useIntegral() {
			this.computedPrice();
		},
		$yroute(n) {
			if (n.name === NAME) this.getCartInfo();
		},
		shipping_type() {
			this.computedPrice();
		}
	},
	onShow: function() {
		let that = this;
		console.log(this.$deviceType)
		this.$store.dispatch('getUser', true);
		that.getCartInfo();
		// console.log(that.$yroute);
		if (that.$yroute.query.pinkid !== undefined) {
			that.pinkId = that.$yroute.query.pinkid;
		}
		if (that.$yroute.query.id !== undefined) {
			that.cartid = that.$yroute.query.id;
			console.log(that.cartid);
		}
	},
	methods: {
		showStoreList(merId) {
			//  alert("merId===="+merId);
			this.$store.commit('get_to', 'orders');
			this.$yrouter.push({
				path: '/pages/shop/StoreList/index?merId=' + merId
			});
		},
		addressType: function(index) {
			//商品只支持配送,但是点击邮寄
			if (this.product_shipping_type && this.product_shipping_type == 2 && index == 0) {
				uni.showToast({
					title: '商品不支持快递配送！',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			if (this.product_shipping_type && this.product_shipping_type == 1 && index == 1) {
				uni.showToast({
					title: '商品不支持到店自提！',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			if (index && !this.systemStore.id) {
				uni.showToast({
					title: '暂无门店信息，您无法选择到店自提！',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			console.log(this);
			this.shipping_type = index;
		},
		changeUseIntegral: function(e) {
			// this.computedPrice();
			this.useIntegral = e.mp.detail.value[0];
		},
		computedPrice() {
			let shipping_type = this.shipping_type;
			postOrderComputed(this.orderGroupInfo.orderKey, {
				addressId: this.addressInfo.id,
				useIntegral: this.useIntegral ? 1 : 0,
				couponId: this.usableCoupon.id || 0,
				plateCouponId: this.usablePlateCoupon.id || 0,
				shipping_type: parseInt(shipping_type) + 1
			})
				.then(res => {
					const data = res.data;
					if (data.status === 'EXTEND_ORDER') {
						this.$yrouter.replace({
							path: '/pages/order/OrderDetails/index',
							query: {
								id: data.result.orderId
							}
						});
					} else {
						this.orderPrice = data.result;
						// alert( this.useIntegral);
						//
						
					}
				})
				.catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err.msg || err.response.data.msg || err.response.data.message,
						icon: 'none',
						duration: 2000
					});
				});
		},
		getCartInfo() {
			const cartIds = this.$yroute.query.id;
			if (!cartIds) {
				uni.showToast({
					title: '参数有误',
					icon: 'none',
					duration: 2000
				});
				return this.$yrouter.back();
			}
			postOrderConfirm(cartIds)
				.then(res => {
					// console.log(res, 999999);
					// console.log(res.data.systemStore || {}, 999999);
					this.offlinePayStatus = res.data.offline_pay_status;
					this.orderGroupInfo = res.data;
					this.deduction = res.data.deduction;
					this.usableCoupon = res.data.usableCoupon || {};
					this.addressInfo = res.data.addressInfo || {};
					// 用来显示到店自提的店铺地址
					this.systemStore = res.data.systemStore || {};
					this.storeSelfMention = res.data.storeSelfMention;
					//
					var product_shippingType = res.data.cartInfo[0].productInfo.shippingType;
					this.product_shipping_type = product_shippingType;

					if (product_shippingType != 2) {
						this.shipping_type = 0; // 邮寄
					} else if (product_shippingType != 1) {
						this.shipping_type = 1; // 配送
					}

					this.computedPrice();
				})
				.catch(() => {
					uni.showToast({
						title: '加载订单数据失败',
						icon: 'none',
						duration: 2000
					});
				});
		},
		addressTap: function() {
			this.showAddress = true;
			if (!this.addressLoaded) {
				this.addressLoaded = true;
				this.$refs.mychild.getAddressList();
			}
		},
		addressRedirect() {
			this.addressLoaded = false;
			this.showAddress = false;
		},
		couponTap: function() {
			this.showCoupon = true;
		},
		couponPlateTap: function() {
			this.showPlateCoupon = true;
		},
		changeCoupon: function(coupon) {
			if (!coupon) {
				this.usableCoupon = {
					couponTitle: '不使用优惠券',
					id: 0
				};
			} else {
				this.usableCoupon = coupon;
			}
			this.computedPrice();
		},
		changePlateCoupon: function(coupon) {
			if (!coupon) {
				this.usablePlateCoupon = {
					couponTitle: '不使用消费券',
					id: 0
				};
			} else {
				this.usablePlateCoupon = coupon;
			}
			this.computedPrice();
		},

		payItem: function(index) {
			this.active = index;
		},
		changeAddress(addressInfo) {
			this.addressInfo = addressInfo;
			this.computedPrice();
		},
		createOrder() {
			let shipping_type = this.shipping_type;
			if (!this.active) {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			var orderTag = '0';
			//0：买给自己 1：赠送他人
			if (orderTag != 1) {
				// if (!this.addressInfo.id && !this.shipping_type) {
				// 	uni.showToast({
				// 		title: '请选择收货地址',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return;
				// }

				// if (this.shipping_type) {
				// 	if ((this.contacts === '' || this.contactsTel === '') && this.shipping_type) {
				// 		uni.showToast({
				// 			title: '请填写联系人或联系人电话',
				// 			icon: 'none',
				// 			duration: 2000
				// 		});
				// 		return;
				// 	}

				// 	if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(this.contactsTel)) {
				// 		uni.showToast({
				// 			title: '请填写正确的手机号',
				// 			icon: 'none',
				// 			duration: 2000
				// 		});
				// 		return;
				// 	}
				// 	if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(this.contacts)) {
				// 		uni.showToast({
				// 			title: '请填写您的真实姓名',
				// 			icon: 'none',
				// 			duration: 2000
				// 		});
				// 		return;
				// 	}
				// }
			}

			uni.showLoading({
				title: '生成订单中'
			});
			let from = {};
			if (this.$deviceType == 'app') {
				from.from = 'app';
			}
			// #ifdef MP-WEIXIN
			subscribeMessage();
			// #endif
			createOrder(this.orderGroupInfo.orderKey, {
				realName: this.contacts,
				phone: this.contactsTel,
				addressId: this.addressInfo.id,
				useIntegral: this.useIntegral ? 1 : 0,
				couponId: this.usableCoupon.id || 0,
				plateCouponId: this.usablePlateCoupon.id || 0,
				payType: this.active,
				pinkId: this.pinkId,
				seckillId: this.orderGroupInfo.seckill_id,
				combinationId: this.orderGroupInfo.combination_id,
				bargainId: this.orderGroupInfo.bargain_id,
				from: this.from,
				mark: this.mark || '',
				shippingType: parseInt(shipping_type) + 1,
				storeId: this.storeItems ? this.storeItems.id : this.systemStore.id,
				orderTag: orderTag,
				...from
			})
				.then(res => {
					// alert(res);
					// console.log(JSON.stringify('1111111111111111111111111',res.msg));
					uni.hideLoading();
					handleOrderPayResults.call(this, res.data, 'create', this.active);
					
				})
				.catch(err => {
					// alert(err);
					handleErrorMessage(err, '创建订单失败');
					payOrderHandle(this.orderGroupInfo.orderKey,'weixin',this.from);
					
				});
		}
	}
};
</script>
